<template>
  <div class="question">
    <!-- 头部 -->
    <div class="question-header m-center">
      <div class="question-search">
        <img src="https://www.imooc.com/static/img/wenda/wenda-logo.png" alt="">
      </div>
    </div>

    <!-- 列表部分 -->
    <div class="m-center">
      <div class="question-content-container">
        <div class="left">
          <el-form :model="questionData"
                   ref="questionForm"
                   :rules="questionRules"
                   status-icon>
            <el-form-item prop="title">
              <el-input
                      v-model="questionData.title"
                      placeholder="请一句话说明你的问题，以问号结尾"
                      clearable
                      show-word-limit
                      maxlength="50"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <tinymce :height="300" v-model="questionData.content"/>
            </el-form-item>

            <el-form-item prop="tag">
              <el-select
                      style="width: 100%"
                      v-model="questionData.tag"
                      multiple
                      size="medium"
                      filterable
                      :multiple-limit="3"
                      placeholder="请选择标题，最多可选择三个，可进行搜索">
                <el-option
                        v-for="item in tagList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button
                      class="question-btn"
                      type="primary"
                      @click="addQuestion">立即发布</el-button>
            </el-form-item>
          </el-form>
        </div>


        <div class="right">
          <!-- 提问tips -->
          <QuestionTips></QuestionTips>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { validNormal } from '@/validate/register';
import { getQuestionTag,saveQuestion } from '@/api/question';
import Tinymce from '@/components/Tinymce'

export default {
  data () {

    //检验标题
    const validateTitle = (rule, value, callback) => {
      if (value.length < 5 || value.length > 50 || !value || !validNormal(value) ){
        callback(new  Error("请输入正确的问题标题，长度要求为5-50，且不能输入特殊字符"))
      }
      else callback()
    }

    //检验标签
    const validateTag = (rule, value, callback) => {
      if (value.length < 1){
        callback(new  Error("请至少选择一个标签"))
      }
      callback()
    }

    return {
      tagList:[],
      questionData: {
        userId: this.userId,
        title: '',
        tag: '',
        content: '',
      },
      questionRules:{
        title:[{validator: validateTitle,trigger: 'blur'}],
        tag:[{validator: validateTag,trigger: ['blur','change'] ,type:'number'}],
      }
    }
  },
  created () {
    this.getTagList()
  },
  methods: {
    getTagList(){
      getQuestionTag().then(result => {
        let { code, data } = result
        if (code === 20000) {
          this.tagList = data.item
        }
      })
    },
    addQuestion(){
      this.$refs.questionForm.validate((valid) => {
        if (valid) {
          //检验通过
          this.questionData.userId = this.userId
          this.questionData.tag = this.questionData.tag.join(',')
          saveQuestion(this.$qs.stringify(this.questionData)).then(result => {
            let { code, data } = result
            if (code === 20000) {
              this.$message({
                type: 'success',
                message: '发布成功！'
              })

              this.$router.push('/question')
            }
          })
        }
        else {
          return false;
        }
      })
    }
  },
  components:{
    QuestionTips: () => import('@/pages/add-question/question-tips'),
    Tinymce
  },
  computed: {
    ...mapGetters({
      'userId': 'id'
    })
  },
}
</script>
<style lang="stylus" scoped>
  @import '~assets/stylus/variables.styl';
  .question
    padding: 20px 0 50px;
    .question-header
      .question-search
        position: relative;
        padding-right: 75px;
        background-color: #fff;
        border-bottom: 1px solid rgba(7,17,27,0.1);
        & > img
          width: 300px;
          height: 60px;
    .question-content-container
      display: flex;
      align-items: flex-start;
      margin-top: 30px;
      .left
        flex: 1;
        .question-list
          padding: 28px 32px;
          background-color: #fff;
          border-radius: 12px;
          box-shadow: 0 4px 8px 2px rgba(7,17,27,.1)
          .question-item
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid rgba(7,17,27,0.1);
            &:last-child
              border-bottom: none;
            .finish-green
              flex: 0 0 40px;
              width: 40px;
              padding: 8px 0;
              margin-right: 15px;
              background-color: rgba(31,173,78,.1);
              color: #1fad4e;
              & > span
                display: block;
                text-align: center;
                line-height: 18px;
                font-size: 16px;
                font-weight: 700;
                margin-top 3px;
                &:last-child
                  font-weight: 400;
                  font-size: 14px;
            .finish-white
              flex: 0 0 40px;
              width: 40px;
              padding: 8px 0;
              margin-right: 15px;
              color: #1fad4e;
              & > span
                display: block;
                text-align: center;
                line-height: 18px;
                font-size: 16px;
                font-weight: 700;
                margin-top 3px;
                &:last-child
                  font-weight: 400;
                  font-size: 14px;
            .content-box
              flex: 1;
              .title
                margin-bottom: 4px;
                font-size: 22px;
                color: $font-first-color;
                font-weight: 700;
                line-height: 24px;
                &:hover
                  color: #1fad4e;
              .tag
                font-size: 12px;
                color: $font-four-color;
                & > img
                  display: inline-block;
                  vertical-align: middle;
                  margin-top: -2px;
                  width: 16px;
                  height: 16px;
                  border-radius: 50%;
                & > span
                  display: inline-block;
                  vertical-align: middle;
                  &.name
                    padding: 0 10px 0 0px;
                  &.view-box
                    padding-left: 10px;
                    & > i, & > span
                      display: inline-block;
                      vertical-align: middle;
        .list-empty
          padding: 10px 0;
          text-align: center;
          font-size: 14px;
          color: #1fad4e;
      .right
        margin-left: 30px;
        flex: 0 0 350px;
        width: 350px;
  .tinymce-container {
    position: relative;
    line-height: normal;

  }
  .question-btn{
    width 160px
    height 40px
    font-size 16px
    background-color: #1fad4e
    float right
  }
</style>
